<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="big-box">
					<div class="title-box">
						<span class="title-line"></span>
						<div class="title">
							<span class="jiu-font30-fff">藏品转赠</span>
							<span class="jiu-font32-555">请输入转赠对象的区块链地址或者手机号码</span>
						</div>
					</div>

					<div style="padding: 0 5.33vw;">
						<div class="product-info">
							<image :src="productInfo.spu.cover" mode="aspectFill" class="product-img"></image>
							<div class="info-box">
								<span class="title">{{ productInfo.spu.spuTitle }}</span>
								<div class="tags-box" v-for="item in productInfo.spu.tags.split(',')">
									<span class="tags">{{ item }}</span>
								</div>
						
								<div class="num-box">
									<image src="../../../static/img/num.png" mode="aspectFill" class="num-img"></image>
									<span class="num">{{ productInfo.collection.nftItemIdV }}/{{ productInfo.spu.nftMaxSupply }}</span>
								</div>
							</div>
						</div>
					</div>
					
					<div class="input-box">
						<div class="input-item" style="padding: 6.4vw;">
							<span class="jiu-font28-aaa" style="flex-shrink: 0;">区块地址</span>
							<input type="text" placeholder="请输入" v-model="ntdAddress" placeholder-class="jiu-font28-555" style="color: #FFCE80;font-weight: 600;width: 100%;" />
						</div>
						<div class="input-item top267" style="padding: 6.4vw;">
							<span class="jiu-font28-aaa">手机号码</span>
							<input type="text" placeholder="请输入" v-model="phone" placeholder-class="jiu-font28-555" style="color: #FFCE80;font-weight: 300;" />
						</div>
						<div class="tips-box top267">
							<image src="../../../static/img/zhuyi.png" mode="aspectFill" style="width: 4.27vw;height: 4.27vw;display: block;margin-right: 1.07vw;flex-shrink: 0;"></image>
							<span class="tip-text">
								<span>转赠规则：</span>
								<span>1.转赠前，请确认您与受赠人均已通过平台的实名认证并遵守相应的法律法规和平台协议；</span>
								<span>2.转赠操作无法撤销；</span>
								<span>3.与数字藏品相关的权力将会同步且毫无保留地转移至受赠人。（实物相关的权益请双方在平台外协商进行）</span>
							</span>
						</div>
					</div>
				</div>
			</ma-refresh>
			<div slot="footer">
				<div class="bottom-box">
					<span class="btn" @tap="nowGiving">立即转赠</span>
				</div>
			</div>
		</ma-body>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				productInfo: {},
				ntdAddress: '',
				phone: ''
			}
		},
		methods: {
			nowGiving(){
				// if(this.productInfo.length == 0 || this.phone.length == 0){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请填写相对应的信息'
				// 	})
				// 	return;
				// }
				
				// if(this.$u.test.mobile(this.phone) == false){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请检查手机号码格式是否正确'
				// 	})
				// 	return
				// }
				
				let data = {
					blockIdAddress: this.ntdAddress,
					phone: this.phone,
					collectionId: this.productInfo.collectionId
				};
				this.$u.api.onCollectionGiving(data).then(()=>{
					uni.showToast({
						icon: 'none',
						title: '转赠中'
					})
					setTimeout(()=>{
						uni.showToast({
							icon: 'none',
							title: '跳转中，请稍后'
						})
					},1000)
					setTimeout(()=>{
						uni.showToast({
							icon: 'none',
							title: '转赠成功'
						})
					},3000)
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					},4000)
				})
			}
		},
		onLoad(e) {
			console.log(JSON.parse(e.info))
			this.productInfo = JSON.parse(e.info)
		}
	}
</script>

<style lang="scss">
	
	.big-box {
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;

		.title-box {
			display: flex;
			padding-left: 5.33vw;

			.title-line {
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}

			.input-text {
				display: flex;
				flex-direction: column;
			}

			.title {
				display: flex;
				flex-direction: column;
			}
		}

		.product-info {
			display: flex;
			padding: 2.13vw;
			margin-top: 4.27vw;
			background-color: #1B1B1B;
			border-radius: 6.4vw;

			.product-img {
				width: 37.33vw;
				height: 37.33vw;
				border-radius: 6.4vw;
			}

			.info-box {
				display: flex;
				flex-direction: column;
				margin-left: 3.2vw;

				.title {
					font-size: 4.27vw;
					font-weight: 500;
					color: #fff;
					width: 44.53vw;
					overflow: hidden; //超出隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
					-webkit-line-clamp: 2; //超出两行隐藏
					-webkit-box-orient: vertical;
				}
				
				.tags-box{
					display: flex;
					flex-wrap: wrap;
					.tags{
						padding: 0 1.07vw;
						border-radius: 1.07vw;
						border: 1px solid #A972FF;
						font-size: 2.67vw;
						font-weight: 300;
						color: #A972FF;
						line-height: 4.27vw;
						margin-top: 1.07vw;
					}
				}
				.num-box{
					width: fit-content;
					flex: 1;
					display: flex;
					align-items: flex-end;
					border-radius: 1.07vw;
					.num{
						padding: 0 1.07vw;
						line-height: 4.27vw;
						width: fit-content;
						background-color: #232323;
						font-size: 2.67vw;
						font-weight: 300;
						color: #FFCE80;
						border-radius: 0 1.07vw 1.07vw 0;
					}
				}
			}
		}
	
		.input-box{
			margin-top: 12.8vw;
			padding-left: 5.33vw;
			.input-item{
				display: flex;
				align-items: center;
				padding: 4.8vw 5.33vw;
				padding-left: 6.8vw;
				background-color: #1B1B1B;
				border-radius: 12.8vw 0 0 12.8vw;
				font-size: $jiu-font28;
				font-weight: 500;
				color: #aaaaaa;
				margin-top: 2.67vw;
				.jiu-font28-aaa{
					width: 15vw;
					margin-right: 4.27vw;
				}
				.send-btn{
					width: 17.07vw;
					line-height: 8.53vw;
					text-align: center;
					border-radius: 5.33vw;
					background-color: #A972FF;
					box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.4800);
					margin-left: 4.27vw;
				}
			}
		}
		.tips-box{
			display: flex;
			align-items: flex-start;
			margin-left: 1.07vw;
			.tip-text{
				font-size: 3.2vw;
				font-weight: 300;
				color: #FF9E3E;
				display: flex;
				flex-direction: column;
			}
		}
		
	}
	.top267{
		margin-top: 4.27vw;
	}
	input{
		font-size: 3.73vw;
		font-weight: 300 !important;
		.jiu-font28-555{
			font-weight: 300;
		}
	}
	.bottom-box{
		background-color: #1b1b1b;
		padding: 2.13vw 5.33vw;
		padding-bottom: calc(2.13vw + env(safe-area-inset-bottom));
		padding-bottom: calc(2.13vw + constant(safe-area-inset-bottom));
		.btn{
			display: block;
			width: 100%;
			line-height: 12.8vw;
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			box-shadow: 0rem 3rem 5rem rgba(71,12,114,0.48);
			text-align: center;
			border-radius: 5.33vw;
		}
	}
</style>
